import React, { useEffect, useState } from 'react'
import { Form, Input, Space, Table, Typography, Button  } from 'antd';
import axios from "axios";
import api from '../../server/Api';
import './NoticeManagement.css'
import {
    NavLink
} from 'react-router-dom'

 
export default function NoticeManagement() {
    const [dataSource, setDataSource] = useState([]);
    const [loading, setLoading] = useState(true);
    const columns = [
        {
            title: '通知编号',
            dataIndex: 'noticeId',
            key: 'noticeId',
        },
        {
            title: '通知标题',
            dataIndex: 'notice',
            key: 'notice',
        },
        {
            title: '发布人',
            dataIndex: 'createUser',
            key: 'createUser',
        },
        {
            title: '发布时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (_, record) => {
                return (
                    <>
                        <Typography.Link onClick={() => Read(record.noticeId)}>
                            查看详情
                        </Typography.Link>
                    </>
                );
            },
        },
    ];

    // 清除删除修改之后的副作用
    useEffect(() => {
        getUserInfo()
    }, []);

    // 获取后台数据
    const getUserInfo = () => {
        setTimeout(() => {
            axios.post(`${api}/getNoticeList`).then(function (response) {
                console.log(response)
                setDataSource(response.data.data);
                setLoading(false);
            }).catch(function (error) {
                console.log(error)
            });
        }, 1000)
    }

    // // 修改操作
    // const edit = (value) => {
    //     console.log(value)
    //     setDataSource([{ admin_id: 2, admin_user: 'jiang', admin_password: '1314', admin_name: '蒋佳峰', is_delete: 1 }])
    // }

    // 删除操作
    const Remove = (value) => {
        console.log(value)
    }

    // 查看
    const Read = (value) => {
        console.log(value);
    }

    // 搜索
    const { Search } = Input;
    const onSearch = (value) => console.log(value);
    // queryfn = (e) => {
    //     let keyword = e.target.value
    //     clearTimeout(window.timer)   // 防抖查询
    //     window.timer = setTimeout(()=>{
    //         let list = this.state.list.filter(r=>r.name===keyword)
    //         if(list.length !== 0){
    //             this.setState({
    //                 list
    //             })
    //         }
    //     },500)
    // }


    return (
        <>
            <div className='search'>
                <Space direction="vertical">
                    <Search
                        placeholder="搜索"
                        allowClear
                        onSearch={onSearch}
                        style={{
                            width: 200,
                        }}
                    />
                    {/* <NavLink to='/addNotice'>
                        <Button>新增</Button>
                    </NavLink> */}
                </Space>

            </div>
            <div className="btn">
                <NavLink to='/addNotice'>
                    <Button>新增</Button>
                </NavLink>
            </div>
            <div className='table'>
                <Form>
                    <Table
                        bordered
                        dataSource={dataSource}
                        columns={columns}
                        loading={loading}
                        rowKey={(record) => record.noticeId} />
                </Form>
            </div>
        </>
    )
}




